<template>
  <el-card
    shadow="hover"
    class="static-card"
    @mouseover="isHover = true"
    @mouseout="isHover = false"
    :style="{ '--color': color }"
  >
    <div class="left-icon" :class="{ isHover: isHover }">
      <i :class="icon"></i>
    </div>
    <div class="right-static">
      <span class="desc">{{ desc }}</span>
      <span class="value">{{ showNumber }}</span>
    </div>
  </el-card>
</template>
<script setup>
import { ref, watchEffect } from "vue";
import { animationNumber } from "@/hooks/animationNumber";
const { showNumber, setNumber } = animationNumber();
const isHover = ref(false);
const props = defineProps({
  desc: {
    type: String,
    default: "",
    require: true,
  },
  value: {
    type: Number,
    default: 0,
  },
  icon: {
    type: String,
    default: "",
    require: true,
  },
  color: {
    type: String,
    default: "",
    require: true,
  },
});
watchEffect(() => {
  console.log(props.value, "----------");
  setNumber(props.value);
});
</script>
<style lang="scss" scoped>
.static-card {
  height: 120px;
  padding: 20px;
  display: flex;
  :deep(.el-card__body) {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }
  .left-icon {
    border-radius: 6px;
    padding: 16px;
    color: var(--color);
    background: #fff;
    i {
      font-size: 40px;
    }
    &.isHover {
      color: #fff;
      background: var(--color);
    }
  }
  .right-static {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    white-space: nowrap;
    height: 100%;
    .desc {
      color: rgba(107, 114, 128, 1);
      font-size: 16px;
      line-height: 16px;
      text-align: right;
    }
    .value {
      font-weight: bold;
      color: #000;
      font-size: 20px;
      line-height: 20px;
    }
  }
}
</style>
